<template>
  <div id="app" class="p10">
      <Button type="primary" @click="showToast">showToast</Button>
      <Button type="info" @click="creartConfirm">creartConfirm</Button>
      <Button type="info" @click="showfn">show</Button>
      <Button type="success" pill  icon="ddddddd" shape></Button>
      <div id="#abc"></div>
      <div class="w50p">
        <Card title="sssssssssss" style="width:200px;background-color:red">
          <div slot="title">0000000000000000000000000000000000000000000000000000</div>
          <div>
            <div>assssssssaaaaaaaaaaaaa</div>
            <div>assssssssaaaaaaaaaaaaa</div>
          </div>
        </Card>
        <Card title="sssssssssss">
          <div>
            <div>assssssssaaaaaaaaaaaaa</div>
            <div>assssssssaaaaaaaaaaaaa</div>
          </div>
        </Card>
      </div>
      
     <!--  <div class="ifast-btns vertical">

        <Button type="primary" @click="show=!show">show按钮</Button>
        <Button type="info">按钮</Button>
      </div> 
      <ButtonGroup>
         <Button type="primary">按钮</Button>
          <Button type="info">按钮</Button>
      </ButtonGroup>
      <ButtonGroup vertical>
         <Button type="primary">按钮</Button>
          <Button type="info">按钮</Button>
      </ButtonGroup> -->
      <!-- <div class="ifast-select-selection">
        <div class="ifast-select-header">
          <input type="text" class="form-control input-sm">
          <div class="ifast-checked-list">
             <div class="ifast-tag-checked">
               <span class="tag-text">1</span>
               <Icon type="ion-ios-close-empty" class="tag-icon" size="16"></Icon>
             </div>
          </div>
          <div class="ifast-select-arrow ifast-select-arrow-checkd">
            <Icon type="ion-ios-arrow-down" ></Icon>
          </div>
        </div>
        <div class="ifast-select-opction">
          <ul class="ifast-dropdown-list">
            <li class="ifast-dropdown-item ifast-dropdown-checked" v-for="i in 5" :key="i">
                <span class="item-text"> {{i}}</span>
                <span class="float-right">123123123</span>
                <span class="item-right select-right">
                  <Icon type="ion-ios-checkmark-empty"></Icon>
                </span>
            </li>
          </ul>
        </div>
      </div> -->
      <!-- <iSelect v-model="value" multiple>
        <Opction value="New York" label="New York">
            <span>New York</span>
            <span style="float:right;color:#ccc">America</span>
        </Opction>
        <Opction value="London" label="London">
            <span>London</span>
            <span style="float:right;color:#ccc">U.K.</span>
        </Opction>
        <Opction value="Sydney" label="Sydney">
            <span>Sydney</span>
            <span style="float:right;color:#ccc">Australian</span>
        </Opction>
      </iSelect>-->
      <!-- <iSelect v-model="value">
        <iOption value="New York" label="New York">
            <span>New York</span>
            <span style="float:right;color:#ccc">America</span>
        </iOption>
        <iOption value="London" label="London">
            <span>London</span>
            <span style="float:right;color:#ccc">U.K.</span>
        </iOption>
        <iOption value="Sydney" label="Sydney">
            <span>Sydney</span>
            <span style="float:right;color:#ccc">Australian</span>
        </iOption>
      </iSelect>  -->
      <!-- <div>
        <div>
          <div class="aasdfads">
            <Select v-model="model1" style="width:100px" size="small" multiple>
          <Opction v-for="(item,index) in cityList" :value="item.value" :label="item.label" :key="index" :disabled="index==3">{{ item.label }}</Opction>
      </Select>
          </div>
        </div>
      </div>
      
        <Select v-model="model3" style="width:100px"  multiple>
          <Opction v-for="(item,index) in cityList" :value="item.value" :label="item.label" :key="index" :disabled="index==3">{{ item.label }}</Opction>
      </Select>
        <Select v-model="model2" style="width:100px" size="large" multiple>
          <Opction v-for="(item,index) in cityList" :value="item.value" :label="item.label" :key="index" :disabled="index==3">{{ item.label }}</Opction>
      </Select> -->
      <!-- <transition enter-active-class="animated bounceIn"
   leave-active-class="animated hinge">
         <p v-show="show">hello</p>
      </transition> -->

      <!-- <Confirm v-model="show" width="520">
        <div slot="header">普通的Modal对话框标题普通的Modal对话框标题普通的Modal对话框标题普通的Modal对话框标题普通的Modal对话框标题普通的Modal对话框标题普通的Modal对话框标题</div>
      </Confirm> -->
      <p>{{show}}</p>
      <i class="ion-logo-bitcoin"></i>

  </div>
</template>

<script>
// import Icon from './components/icon/icon';
// import Radio from './components/radio/radio';
// import RadioGroup from './components/radio/radio-group'
// import CheckboxGroup from './components/checkbox/checkbox-group'
// import Checkbox from './components/checkbox/checkbox';
// import iSwitch from './components/switch/switch';
// // import CarouselText from './components/carousel/carousel-text';
// import Carousel from './components/carousel/carousel';
// import CarouselItem from './components/carousel/carousel-item';
import Select from './components/select/select';
import Opction from './components/select/opction';
import Button from './components/button/button'
import toast from "./components/toast/index-v2";
import Card from "./components/card/card";
import TransferDom from './directives/transfer-dom.js'
import Notification from './components/notification/index.js';

export default {

  name: "app",
  components: {
    Button,
    Select,
    Opction,
    Card,
  },
  data () {
    return {
      value1: 0,
      value2: 0,
      phone: 'apple',
      show:false,
      value:'New York',
      abc:'1',
      cccc:'',
      range: '',
      falg: '1',
      list: ['1', '12'],
      animal: '印度黑羚',
      social: ['facebook', 'github'],
      button: ['twitter'],
      cityList: [
        {
            value: 'New York',
            label: 'New York'
        },
        {
            value: 'London',
            label: 'London'
        },
        {
            value: 'Sydney',
            label: 'Sydney'
        },
        {
            value: 'Ottawa',
            label: 'Ottawa'
        },
        {
            value: 'Paris',
            label: 'Paris'
        },
        {
            value: 'Canberra',
            label: 'Canberra'
        }
    ],
    model1: '',
    model2: '',
    model3: ''
    }
  },
  directives:{TransferDom},
  mounted () {
    // this.setFont(750)();
    // window.onresize = this.setFont(750);
   
    // let newAttr=[]
    // attr.icons.map((item,index)=>{
    //   newAttr=[...newAttr,...item.icons]
    // })
    // let arr2 =newAttr.filter((x, index,self)=>self.indexOf(x)===index) 
    // console.log(arr2)
    // console.log(JSON.stringify(newAttr))
  },
  methods: {
    showfn(){
        
      Notification.open({title:'aaaaa',content:'这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题',type:'notice'})
      console.log(Notification)
      // console.log(Notification)
      // Notification.notice()
      // this.$ifast.confirm.show({
      //   title:'标题',
      //   width:300,
      //   content:'好',
      //   onConfirm:()=>{
      //     console.log('onConfirm')
      //     this.show=!this.show;
      //   },
      //   onCancel:()=>{
      //     console.log('onCancel')
      //   }
      // })
    },
    showToast(){
      toast.show({ msg: "你112323好", time: 5000 });
    },
    creartConfirm() {
      Confirm({
        title: "title",
        message: "message",
        confirmBtnText: "确定",
        cancelBtnText: "取消"
      })
        .then(() => {
          console.log("确定");
        })
        .then(() => {
          console.log("取消");
        });
    },
    changs(data){
    },
    // 自动设置字体，转为rem计算
    setFont (oriWidth) {
      return function () {
        var viewportWidth = document.documentElement.clientWidth;
        if (viewportWidth > oriWidth) {
          viewportWidth = oriWidth;
        }
        if (viewportWidth < 320) {
          viewportWidth = 320;
        }
        document.documentElement.style.fontSize = viewportWidth / (oriWidth / 100) + 'px';
      }
    }
  }
};
</script>
<style  lang="scss">
// @import "./styles/index.scss";
@import "./styles/ifast-px.scss";
// @import "./styles/ifast-rem.scss";
// @import "./styles/fonts/css/ionicons.min.css";
.demo-carousel {
  background-color: green;
  text-align: center;
  color: white;
  height: 100%;
}
</style>
